/**
 * Author: Shen Yanqiu
 * Date: 2018-02-28
 * Time: 10:29
 *
 */
import React from 'react';
import moment from "moment/moment";
import { Row, Col, Card, Tabs, DatePicker } from 'antd';
import styles from './style.less';
import { AreaChartBlock } from 'components';

const RangePicker = DatePicker.RangePicker;
const TabPane = Tabs.TabPane;

export default class NewmediaStatisticsCartogramCardBlick extends React.Component {
  state = {
    checkDate: [],
    areaChartMessage: '近一周',
  };
  render() {
    const { areaChartDate, zsType, title: titleText, doUpdateAreaChart } = this.props;
    const changeHandler = (dates) => {
      this.setState({
        checkDate: dates,
        areaChartMessage: '',
      });
      doUpdateAreaChart(dates, zsType);
    };
    const changeMessage = (msg) => {
      const message = {
        today: '今天',
        week: '近一周',
        month: '近一月',
      };
      return message[msg];
    };
    const checkSimple = (type) => {
      const simpleDate = {
        today: [moment(), moment()],
        week: [moment().startOf('week'), moment().endOf('week')],
        month: [moment().startOf('month'), moment().endOf('month')],
      };
      this.setState({
        checkDate: simpleDate[type],
        areaChartMessage: changeMessage(type),
      });
      doUpdateAreaChart(simpleDate[type], zsType);
    };
    return (
      <Card title={<span className={styles.CardTitle}>{titleText}</span>} bordered={false} className={styles.CardTable}>
        <Col span={5}>
          <div className={styles.AreaChartTitle}>
            {this.state.areaChartMessage}
          </div>
        </Col>
        <Col span={19}>
          <Row justify={"space-between"} type={"flex"} align={"middle"}>
            <Col />
            <Col>
              <Row className={styles.AreaChartTime}>
                <Col span={11}>
                  <Tabs defaultActiveKey="week" tabBarGutter={0} size={"small"} tabBarStyle={{ border: 0 }} onChange={checkSimple}>
                    <TabPane tab="今天" key="today" />
                    <TabPane tab="本周" key="week" />
                    <TabPane tab="本月" key="month" />
                  </Tabs>
                </Col>
                <Col span={13}>
                  <RangePicker
                    ranges={{ '今天': [moment(), moment()], '本周': [moment().startOf('week'), moment().endOf('week')], '本月': [moment().startOf('month'), moment().endOf('month')] }}
                    value={this.state.checkDate}
                    allowClear={false}
                    onChange={changeHandler}
                    placeholder={['开始时间', '结束时间']}
                  />
                </Col>
              </Row>
            </Col>
          </Row>
          <AreaChartBlock data={areaChartDate} />
        </Col>
      </Card>
    );
  }
}
